<template>
	<view class="content home">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view">
			</view>
		</view>
		<!-- #endif -->
		<view class="header-top">
			<image class="headerImg" :src="userinfo.avatar | imgurl"></image>
			<text>UFT环球影投</text>
		</view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" 
						:indicator-dots="indicatorDots" 
						:circular="circular" 
						:autoplay="autoplay" 
						:interval="interval"
						:duration="duration">
						<swiper-item v-for="(item,index) in banner" :key="index">
							<view class="swiper-item uni-bg-red">
								<image class="swiperImg" :src="item.image | imgurl"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<view class="announcement" v-if="timeshow">
			<view class="img">
				<image class="image" src="../../static/img/laba@2x.png"></image>
			</view>
			<swiper class="fontScoll" vertical="true" autoplay="true" circular="true" interval="5000">
				<swiper-item v-for="(item, index) in notice" :key="index">
					<navigator>{{item.content}}</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="GrabASingle" v-if="timeshow">
			<view class="times">
				<view class="exchangeLeft vertical">
					<text>抢单周期倒计时</text>
					<view style="color:#03AD8F;">
						<count-down :endTime="homedata.next_order_time+''" :callback="callback" :endText="endText"></count-down>
					</view>
				</view>
				<view class="exchangeRight vertical">
					<text>下次抢单时间</text>
					<view style="color:#D14B64;">
						<count-down :endTime="homedata.period_time+''" :callback="callback" :endText="endText"></count-down>
					</view>
				</view>
			</view>
			<button class="smallBtn" @click="golink('../GrabSheet/GrabSheet')">申请抢单</button>
		</view>

		<view class="exchange constant">
			<view class="exchangeLeft vertical">
				<text style="font-size: 14px;">静态收益 (UFT)</text>
				<text class="ollBalance cl">{{currdata.freeze | numFilter2}}</text>
				<text>≈ ¥{{currdata.freeze*homedata.uftcny | numFilter2}}</text>
			</view>
			<view class="exchangeRight vertical">
				<text style="font-size: 14px;">动态收益 (UFT)</text>
				<text class="ollBalance cl">{{currdata.balance | numFilter2}}</text>
				<text>≈ ¥{{currdata.balance*homedata.uftcny | numFilter2}}</text>
			</view>
			<button class="smallBtn" @click="golink('../assets/assets?type=UFT')">资产挂售</button>
		</view>

		<view class="assets">
			<view class="assetsHeader" @click="golink('../Detailed/Detailed')">
				<image src="../../static/img/UNC.png" style="width: 28px;height:28px;"></image>
				<text>资产明细</text>
			</view>
			<view style="width: 15px;"></view>
			<view class="assetsCenter">
				<view @click="golink('../assets/assets?type=USDT')" class="constant assetsLi">
					<view class="constant view">
						<image src="../../static/img/USDT.png" style="width: 28px;height:28px;"></image>
						<text class="text">USDT</text>
					</view>
				</view>
				<view style="height: 10px;"></view>
				<view @click="golink('../assets/assets?type=UFT')" class="constant assetsLi">
					<view class="constant view">
						<image src="../../static/img/uft.png" style="width: 28px;height:28px;"></image>
						<text class="text">UFT</text>
						<text style="opacity: 0;">T</text>
					</view>
				</view>
			</view>

			<view class="version" v-show="show">
				<view class="versionbox">
					<view class="top">
						<text class="iconfont" style="font-size: 40px;text-align: center;">&#xe686;</text>
						<view class="right">
							<text class="title">UFT环球影投版本升级啦!</text>
							<text>版本V: {{versiontext}}</text>
						</view>
					</view>
					<view class="bottom">
						<view @click="show=false">取消</view>
						<view style="width: 1px;height:100%;background: #f5f5f5;"></view>
						<view @click="getversion" style="color: rgb(15, 174, 255);">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
	import CountDown from "@/components/CountDown.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'token']),
		components: {
			// uniCountdown,
			CountDown
		},
		data() {
			return {
				list: ['这里是一条滚动的公告栏'],
				timeshow: false, //初始化倒计时组件
				endText: '已結束',
				endTime: '1557476957', //抢单周期倒计时
				nextendTime: '', //下次抢单时间

				homedata: [],
				notice: [],
				assetsLiist: [],
				userinfo: [],
				banner: [],
				balancex: [],
				currdata: [],
				
				indicatorDots: true, //轮播图指示点
				autoplay: true, //轮播图自动轮播
				circular: true, //无限轮播
				interval: 3000, //自动播放间隔时长
				duration: 500, //幻灯片切换时长

				version: '', //版本号
				versiontext:'',
				show: false
			}
		},
		onLoad() {
			//判断是否登录,如果没有登录跳转登录页.
			if (!this.token) {
				this.golink('../login/login')
			}
			this.getData();
			this.getVersion();
			this.version = plus.runtime.version;
		},
		methods: {
			// 跳转到其他页面
			golink(link) {
				uni.navigateTo({
					url: link
				})
			},
			//倒计时回调函数
			callback: function() {
				this.getData()
			},
			getData: function() {
				const _this = this;
				this.$request.post("/api/index/index", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.homedata = res.data.data;
							_this.assetsLiist = res.data.data.assets;
							_this.notice = res.data.data.notice;
							_this.banner = res.data.data.banner;
							_this.timeshow = true;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});

				//获取用户信息
				this.$request.get("/api/user/getUserInfo", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.userinfo = res.data.data.user;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
				//获取用户余额
				this.$request.post("/api/wallet/getUserBalance", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.balancex = res.data.data;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});

				//获取币种详情
				const data = {
					curr_id: 7
				}
				this.$request.post("/api/index/getCurrDetail", {
						data: data
					})
					.then(res => {
						if (res.data.code == 1) {
							_this.currdata = res.data.data;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			//获取版本
			getVersion: function() {
				const _this = this;
				this.$request.get("/api/system/getVersion", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.versiontext = res.data.data.version
							if (res.data.data.version !== _this.version) {
								_this.show = true;
							}
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			getversion: function() {
				//打开外部网站
				plus.runtime.openURL('http://www.huanqiuyt.com/web/#/download');
			}
		},
		filters: {
			imgurl(value) {
				value = 'http://www.huanqiuyt.com' + value
				return value
			},
			numFilter2(value) {
				// 截取当前数据到小数点后两位
				let realVal = Number(value).toFixed(2)
				// num.toFixed(2)获取的是字符串
				return Number(realVal)
			}
		},
		

	}
</script>

<style lang="less">
	.content {
		width: 100%;
		padding: 0;

		.header-top {
			height: 90upx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.headerImg {
				position: absolute;
				top: 5upx;
				left: 10px;
				height: 80upx;
				width: 80upx;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.GrabASingle {
			border-bottom: 5px solid #F1F1EC;
			background: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			height: 100px;
			padding: 40upx 0;
			justify-content: space-around;

			.times {
				display: flex;
			}

			.exchangeLeft {
				border-right: 1px solid #F1F1F1;
			}

			.exchangeLeft,
			.exchangeRight {
				font-size: 14px;
				width: 49%;

				>text {
					height: 40upx;
					line-height: 40upx;

					&.ollBalance {
						font-size: 44upx;
						height: 60upx;
						line-height: 60upx;
						margin-top: 20upx;
					}

					&:last-child {
						color: #6D87A8;
					}
				}
			}
		}

		.exchange {
			border-bottom: 5px solid #F1F1EC;
			background: #fff;
			text-align: center;
			height: 160px;
			padding: 20upx 20upx;
			align-content: space-around;

			.exchangeLeft {
				border-right: 1px solid #F1F1F1;
			}

			.exchangeLeft,
			.exchangeRight {

				font-size: 24upx;
				width: 49%;

				>text {
					height: 40upx;
					line-height: 40upx;

					&.ollBalance {
						font-size: 44upx;
						height: 60upx;
						line-height: 60upx;
						margin-top: 20upx;
					}

					&:last-child {
						color: #6D87A8;
					}
				}
			}
		}

		.announcement {
			height: 70upx;
			line-height: 22px;
			background: #fff;
			font-size: 28upx;
			position: relative;
			display: flex;
			align-items: center;
			color: #555;
			border-bottom: 1px solid #eee;

			.img {
				width: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.image {
					width: 42upx;
					height: 42upx;

				}
			}

			.fontScoll {
				flex: 1;
				height: 22px;
				._notice {
					left: 80upx;
					line-height: 22px;
					font-size: 14px;
					width: 86%;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.assets {
			background: #fff;
			padding: 20upx;
			display: flex;
			align-items: center;
			border-bottom: 5px solid #F1F1F1;

			.assetsHeader {
				flex: 1;
				display: flex;
				flex-direction: column;
				height: 100px;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: url('../../static/img/11.png') no-repeat;
				background-size: 100% 100%;
			}

			.assetsCenter {
				flex: 1;
				height: 100px;
				display: flex;
				flex-direction: column;

				.assetsLi {
					width: 100%;
					display: flex;
					flex-direction: column;
					height: 150upx;
					background: url('../../static/img/12.png') no-repeat;
					background-size: 100% 100%;

					.view {

						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;

						>.text {
							margin-left: 20upx;
							color: #fff;
							font-size: 36upx;
						}
					}

					.balance {
						flex: 1;
						text-align: right;
					}
				}
			}

			.version {
				position: fixed;
				background: rgba(0, 0, 0, .7);
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 999;

				.versionbox {
					width: 80%;
					height: 200px;
					background: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border-radius: 10px;
					overflow: hidden;

					.top {
						height: 140px;
						background: #2881ff;
						display: flex;
						color: #fff;
						align-items: center;
						font-size: 14px;

						.iconfont {
							width: 80px;
						}

						.right {
							display: flex;
							flex-direction: column;
						}

						.title {
							font-size: 18px;
							margin-bottom: 10px;
						}

					}

					.bottom {
						height: 60px;
						display: flex;
						align-items: center;
						justify-content: space-around;
					}
				}
			}
		}
	}

	.fast {
		display: initial;
		width: 12upx;
		height: 60upx;
		justify-content: space-between;
		background: #2792E5;
	}

	.swiper {
		height: 300upx;
	}

	.swiper-item {
		display: block;
		height: 300upx;
		line-height: 300upx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40upx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60upx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20upx;
	}

	.swiperImg {
		width: 100%;
		height: 100%;
	}
</style>
